<template>
  <div class="cp-nav-bar">
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="onClickLeft"
      :right-text="a"
      @click-right="onClickRight"
    />
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'

// defineProps使用的时候有两种写法， vue3原生写法，ts写法
// defineProps({
//   a: {
//     type: String
//   }
// })
const props = withDefaults(
  defineProps<{
    a?: string
    title?: string
    leftfn?: () => void
    rightfn?: () => void
  }>(),
  {
    a: '',
    title: ''
  }
)

const route = useRoute()
const router = useRouter()
// vue3要获取当前的路由信息，对比vue2的 this.$route
// console.log(route)

const onClickLeft = () => {
  if (props.leftfn) {
    props.leftfn()
  } else {
    router.back()
  }
  // 等价于 vue2的  this.$router.back()
  // router.go(-1)
}
const onClickRight = () => {
  if (props.rightfn) {
    props.rightfn()
  } else {
    router.push('/register')
  }
}
</script>

<!-- <style lang="scss">
// 1. 再写一个style标签，不写scoped属性， 在结合一个自定义的父类，实现私有化
.cp-nav-bar .van-nav-bar__text {
  color: var(--cp-primary);
}
</style> -->

<style lang="scss" scoped>
// 添加了scoped以后，van的样式就不会生效，样式穿透的问题，涉及到深度选择器
// 修改vant-ui的样式，一般是两种方法：
// 1. 再写一个style标签，不写scoped属性， 在结合一个自定义的父类，实现私有化
// 2. 深度选择器的语法，有很多的变化，
// 在vue2里面  ::v-deep .main   /deep/ .main
// 在vue3里面  :deep(.main) {}
:deep(.van-nav-bar__text) {
  color: var(--cp-primary);
}
</style>
